<template>
  <div id="app">
    <el-row :gutter="10">
      <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1"
        ><div class="grid-content"></div
      ></el-col>
      <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22"
        ><div class="grid-content bg-purple">
          <div class="form_area">
            <el-form
              size="small"
              :inline="true"
              :model="formInline"
              label-position="right"
              class="demo-form-inline"
            >
              <el-form-item label="昵称">
                <el-input v-model="formInline.name" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="横坐标">
                <el-input
                  v-model="formInline.horizontal"
                  placeholder=""
                ></el-input>
              </el-form-item>
              <el-form-item label="纵坐标">
                <el-input
                  v-model="formInline.vertical"
                  placeholder=""
                ></el-input> </el-form-item
              ><br />
              <el-form-item>
                <el-button type="success" @click="onAdd()" size="mini"
                  >新增</el-button
                >
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="getInfos" size="mini"
                  >查询</el-button
                >
              </el-form-item>
              <el-form-item>
                查询结果：<span style="color: #409eff">{{ total }}</span> 条
              </el-form-item>
            </el-form>
          </div>

          <div class="table_area">
            <div
              class="hand_table"
              v-for="(every, index) in tableData"
              v-bind:key="index"
            >
              <p>昵称：{{ every.name }}</p>
              <p>等级：{{ every.level == "0" ? "9" : every.level == "8" ? "8" : "10" }}</p>
              <p>横坐标：{{ every.horizontal }}</p>
              <p>纵坐标：{{ every.vertical }}</p>
              <p>状态：{{ every.status == "0" ? "未打" : "已打" }}</p>
              <p>时间：{{ every.createTime }}</p>
            </div>
          </div>
          <div class="dialog_area">
            <el-dialog
              :title="dialog_form.now_type == 'add' ? '新增数据' : '修改数据'"
              :width="dialog_form.dialogwidth"
              :visible.sync="dialog_form.dialogFormVisible"
            >
              <el-form :model="dialog_form" size="mini" label-width="auto">
                <el-form-item label="昵称">
                  <el-input
                    v-model="dialog_form.param.name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="等级">
                  <el-select
                    v-model="dialog_form.param.level"
                    placeholder="请选择"
                  >
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="8" :value="8"></el-option>
                    <el-option label="9" :value="0"></el-option>
                    <el-option label="10" :value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="横坐标">
                  <el-input
                    v-model="dialog_form.param.horizontal"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="纵坐标">
                  <el-input
                    v-model="dialog_form.param.vertical"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select
                    v-model="dialog_form.param.status"
                    placeholder="请选择"
                  >
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="未打" :value="0"></el-option>
                    <el-option label="已打" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button
                  @click="dialog_form.dialogFormVisible = false"
                  size="mini"
                  >取 消</el-button
                >
                <el-button
                  type="primary"
                  @click="addInfo()"
                  size="mini"
                  v-show="dialog_form.now_type != 'edit'"
                  >确 定</el-button
                >
                <el-button
                  type="primary"
                  @click="editInfo()"
                  size="mini"
                  v-show="dialog_form.now_type == 'edit'"
                  >修 改</el-button
                >
              </div>
            </el-dialog>
          </div>
        </div>
      </el-col>
      <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1"
        ><div class="grid-content"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      dialogWidth: 0,
      dialog_form: {
        dialogwidth: "90%",
        now_type: "add",
        dialogFormVisible: false,
        param: {
          id: "",
          name: "",
          level: "",
          horizontal: 0,
          vertical: 0,
          status: "",
        },
      },
      formInline: {
        name: "",
        horizontal: "",
        vertical: "",
      },
      tableData: [],
      choseRowID: "",
      total: 0,
    };
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth();
      })();
    };
  },
  methods: {
    setDialogWidth() {
      console.log(document.body.clientWidth);
      var val = document.body.clientWidth;
      const def = 400; // 默认宽度
      if (val < def) {
        this.dialog_form.dialogwidth = "90%";
      } else {
        this.dialog_form.dialogwidth = def + "px";
      }
    },
    getInfos() {
      this.$ajax
        .get(
          "http://njymw.cn:9500/api/Copper/GetCopperTable?pageSize=9999&currentPage=1&name=" +
            this.formInline.name +
            "&horizontal=" +
            this.formInline.horizontal +
            "&vertical=" +
            this.formInline.vertical +
            ""
        )
        .then((response) => {
          this.total = response.data.result.length;
          this.tableData = response.data.result;
        })
        .catch((response) => {
          console.log(response);
        });
    },
    handleDelete(params2) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$ajax
          .post("http://njymw.cn:9500/api/Copper/DeleteCopper?id=" + params2.id)
          .then((response) => {
            this.getInfos();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch((response) => {
            console.log(response);
          });
      });
    },
    handleEdit(row) {
      this.choseRowID = row.id;
      this.dialog_form.now_type = "edit";
      this.dialog_form.dialogFormVisible = true;
      this.dialog_form.param.name = row.name;
      this.dialog_form.param.horizontal = row.horizontal;
      this.dialog_form.param.vertical = row.vertical;
      this.dialog_form.param.level = row.level;
      this.dialog_form.param.status = row.status;
    },
    onAdd() {
      this.dialog_form.now_type = "add";
      this.dialog_form.dialogFormVisible = true;
    },
    editInfo() {
      this.dialog_form.param.id = this.choseRowID;
      console.log(this.dialog_form.param);
      let params = this.dialog_form.param;
      this.$ajax
        .post("http://njymw.cn:9500/api/Copper/PutCopper", params)
        .then((response) => {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.dialog_form.dialogFormVisible = false;
          this.getInfos();
        })
        .catch((response) => {
          console.log(response);
        });
    },
    addInfo() {
      this.dialog_form.param.level = Number(this.dialog_form.param.level);
      this.dialog_form.param.status = Number(this.dialog_form.param.status);
      this.dialog_form.param.horizontal = Number(
        this.dialog_form.param.horizontal
      );
      this.dialog_form.param.vertical = Number(this.dialog_form.param.vertical);
      delete this.dialog_form.param.id;
      let params = this.dialog_form.param;
      this.$ajax
        .post("http://njymw.cn:9500/api/Copper/PutCopper", params)
        .then((response) => {
          this.$message({
            type: "success",
            message: "新增成功!",
          });
          this.dialog_form.dialogFormVisible = false;
          this.getInfos();
          this.dialog_form.param = {
            id: "",
            name: "",
            level: "",
            horizontal: 0,
            vertical: 0,
            status: "",
          };
        })
        .catch((response) => {
          console.log(response);
        });
    },
  },
  created() {
    this.setDialogWidth();
    this.getInfos();
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  .el-row {
    margin: 0 !important;
    margin-bottom: 20px;
    height: 100%;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    margin-top: 1%;
    border-radius: 4px;
  }
  .bg-purple {
    // background-color: #d3dce6;
    height: 100%;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .form_area {
    padding: 2% 0 0 1.5%;
    label {
      display: inline-block;
      width: 100px;

      text-align: right;
    }
  }

  .el-form .el-select {
    width: 100%;
  }
  // .dialog_area {
  //   .el-input {
  //     width: 350px;
  //   }
  // }

  .table_area {
    .el-button--mini,
    .el-button--mini.is-round {
      padding: 7px !important;
    }

    .hand_table {
      padding: 3%;
      width: 90%;
      margin: 0 auto;
      margin-bottom: 2%;
      background-color: #f8f8f8;
      border: 0;
      box-shadow: 4px 3px 6px 0 rgba(0, 0, 0, 0.5);
    }
  }
  .el-dialog__header {
    padding: 15px 15px 10px;
  }
  .el-dialog__body {
    padding: 10px 10px;
  }
  .el-dialog__footer {
    padding: 0 10px 10px;
  }
}

::-webkit-scrollbar-track-piece {
  //滚动条凹槽的颜色，还可以设置边框属性
  background-color: #f8f8f8;
}
::-webkit-scrollbar {
  //滚动条的宽度
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-thumb {
  //滚动条的设置
  background-color: #409eff;
  background-clip: padding-box;
  min-height: 28px;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #d3dce6;
}
</style>
